<template>
  <div>
    <a-tooltip placement="right">
      <template #title>
        <span>企业后台</span>
      </template>
      <img class="item" style="margin-bottom: 16px" src="../assets/setting.png" alt>
    </a-tooltip>
    <a-tooltip placement="right">
      <template #title>
        <span>帮助文档</span>
      </template>
      <img class="item" style="margin-bottom: 16px" src="../assets/answer.png" alt>
    </a-tooltip>
    <a-popover placement="rightBottom" trigger="click" v-model="popVisible">
      <img class="item" style="margin-bottom: 0" src="../assets/user.png" alt>
      <template slot="content">
        <div class="pop-content">
          <div class="u-title">
            <span>{{useInfo['userName']||'--'}}</span>
            <img v-if="useInfo['avatar']" :src="useInfo['avatar']" alt>
          </div>
          <ul class="u-item">
            <li>
              <a-icon type="home"/>
              <a @click="home()">前往官网</a>
            </li>
            <li>
              <a-icon type="user"/>
              <a @click="userSet()">个人设置</a>
            </li>
            <li>
              <a-popconfirm title="你确定要退出平台吗?" ok-text="确定" cancel-text="取消" @confirm="logout">
                <a-icon type="logout"/>
                <a>退出登录</a>
              </a-popconfirm>
            </li>
          </ul>
        </div>
      </template>
    </a-popover>
  </div>
</template>

<script>
export default {
  name: "SiderCard",
  data() {
    return {
      popVisible: false,
      useInfo:{
        userId: "3232",
        userName: "迪丽热巴",
        avatar: "https://tvax1.sinaimg.cn/crop.0.0.1080.1080.180/63885668ly8geyrcrw0zjj20u00u0mz6.jpg?KID=imgbed,tva&Expires=1620983141&ssig=CsZWDp%2Bo%2BA"
      }
    };
  },
  methods: {
    logout() {
      // logout().then(() => {
      // clearCookie();
      window.reload();
      // });
    },
    userSet() {
      this.$router.push("/setting/selfInfo");
    }
  }
};
</script>

<style lang="less" scoped>
.item {
  cursor: pointer;
  position: relative;
}
.pop-content {
  width: 300px;
  color: #333333;
  font-size: 14px;

  .u-title {
    height: 66px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    span {
      font-size: 20px;
      color: #333;
      line-height: 54px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
  }

  .u-item {
    padding: 4px;
    list-style: none;
    li {
      padding-top: 20px;
      a {
        color: #333;
        margin-left: 8px;
      }
    }
    li:hover a {
      color: #647bfc;
    }
  }
}
</style>